<template>
  <div class="clearfix">
    <!-- 横条 -->
    <el-row class="row">
      <el-col :span="21" vertical-align="center" fixed="right">
        代码覆盖率项目-版本列表
      </el-col>
    </el-row>
    <br>
    <div  style="font-size:100%">项目选择
    <el-select v-model="typeId" placeholder="请选择" @change="changetypeId()">
      <el-option
        v-for="item in typeList"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    </div>
    <br>
    <!-- 表格数据 -->
    <el-table ref="form" :data="form" :model="form" label-width="250px">
      <el-table-column prop="name" label="版本名称" width=225>
      </el-table-column>

      <el-table-column prop="version_person" label="版本负责人" width=125>
      </el-table-column>

      <el-table-column prop="passrate" label="通过率" width=100>
          <template slot-scope="props">
              <div>
                {{props.row.pass_rate.Satisfaction_brand}}/{{props.row.pass_rate.total_version_brand}}
              </div>
          </template>
      </el-table-column>

      <el-table-column prop="fail_task" label="不达标QA跟进人" width=350>
        <template slot-scope="props">
            <div v-if="props.row.pass_rate.Satisfaction_brand === props.row.pass_rate.total_version_brand && props.row.pass_rate.total_version_brand !== 0">覆盖率全部达标</div>
            <div v-else-if="props.row.fail_task === ''">无覆盖率不达标需求</div>
            <div v-else>
              <p style="white-space: pre-wrap;" v-html="change(props.row.fail_task)"></p>
            </div>
        </template>
      </el-table-column>

      <el-table-column prop="fail_task" label="无覆盖率数据分支" width=350>
        <template slot-scope="props">
            <div v-if="props.row.pass_rate.Satisfaction_brand === props.row.pass_rate.total_version_brand && props.row.pass_rate.total_version_brand !== 0">覆盖率全部达标</div>
            <div v-else-if="props.row.fail_ticket === ''">无没有覆盖率数据需求</div>
            <div v-else>
              <p style="white-space: pre-wrap;" v-html="change(props.row.fail_ticket)"></p>
            </div>
        </template>
      </el-table-column>

      <el-table-column label="操作" width=“1200”>
          <template slot-scope="props">
              <el-button  size="small" @click="goVersionList(props.row)" type="primary" outline>跳转至版本详情</el-button>
          </template>
      </el-table-column>
    </el-table>
    <br>
    <!-- 分页 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalRow">
    </el-pagination>
  </div>
</template>

<script>
  import {api, postRequest, getRequest} from "@/api/commit";
  export default {
    name: "ScpProjectList",
    data() {
      return {
        currentPage: 1,
        totalRow: 0,
        pageSize: 5 ,
        typeId:"membership",
        typeList: [{
              id: "membership",
              name: 'membership'
            },{
              id: "crm",
              name: 'crm'
            }],
        rules: {
          env: [
            {required: true, message: 'env不能为空', trigger: 'blur'}
          ],
        },
        form: []
      }
    },
    components:{
    },
    methods: {
      change:function(content){
        content = content.replace(/;/g,";</br>");
        content = content.replace(/；/g,"；</br>");
        return content;
      },

      changetypeId(){
        this.init_data()
      },

      goVersionList: function(row){        
        this.$router.push({
          path: '/ScpVersionListView',
          query:{
            project_name:this.typeId,
            version_name:row.name
          }
        })
      },

      handleSizeChange(val) {
        this.pageSize = val;
        this.init_data();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.init_data();
      },

      init_data() {
        getRequest(api['get_all_version_list'],{
          "page_size":this.pageSize,"page":this.currentPage,"project_name":this.typeId}).then((res) => {
          res = res.resultReturn
          this.form= res.data
          this.totalRow=res.total
        }, (error) => {
          console.info(error)
        })
      },
    },
    mounted () {
      this.init_data()
    }
  }
</script>

<style scoped>

</style>